<template>
  <div class="page">
    <h2>
      <a @click="back" class="btnBack">返回</a>
      订单支付
    </h2>
    <div class="paymentDetail">
      <div class="image"><img :src="detail.p_cover" alt=""></div>
      <div class="content">{{detail.p_title}}</div>
      <div class="desc">
        <h5>订单详细：</h5>
        <ul>
          <li>订单号：{{detail.id}}</li>
          <li>价格：{{detail.o_price}}元</li>
          <li>份数：{{detail.o_copies}}份</li>
        </ul>
        <h5>支付方式</h5>
        <ul>
          <li>微信支付</li>
          <li>支付宝支付</li>
          <li>银联支付</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import router from '../router'
import Api from '../api'

export default {
  data () {
    return {
      rootApi: 'http://localhost:4000/',
      detail:{}
    }
  },
  methods: {
    back(){
      router.go(-1);
    },
    goDetail(id){
      router.push('/product/'+id);
    },
    getOrderData(id) {
      Api.getOrderDetail({
        data: {
          id: id
        },
        success: (d) => {
          this.detail = d.data;
        }
      });
    },
  },
  mounted: function () {
    let id = router.history.current.params.id;
    this.getOrderData(id);
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
  .btnBack{float: left; font-size: 14px; line-height:30px;}
  .paymentDetail{
    .desc{clear: both;}
    text-align: left;
    .image{float: left;width: 100px;height: 100px;
      img{display: block;width: 90px;height: 90px; background: #999;}
    }
    .info{
      h4{font-size: 12px;}
    }
  }
</style>
